<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--  关闭缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!--  一会试验下是否有必要存在 -->
<meta name="apple-touch-fullscreen" content="yes"> 
<!--网站开启对 web app 程序的支持。-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--在 web app 应用下状态条（屏幕顶部条）的颜色；-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--使设备浏览网页时对数字不启用电话功能-->
<meta name="format-detection" content="telephone=no">
<!--使用wtai协议进行拨打电话。-->
<meta http-equiv="x-rim-auto-match" content="none"/>
<!--标示移动站点-->
<meta name="HandheldFriendly" content="true"/>
<title>无标题文档</title>
<link rel="stylesheet" href="swiper.min.css" type="text/css"/>
<style type="text/css">
body{font-size:22px; max-width:640px;margin:0px auto;padding:0px;font-family:"微软雅黑"}
ul,li,img,h1,p,span,tr,td,dl,dt,dd{margin:0px;padding:0px;}
li{list-style:none} img{border:0px}
.swiper-container{width:100%;height:200px;padding:10px;box-sizing:border-box;-webkit-box-sizing:border-box;background:#333}
</style>
</head>

<body>

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" style="background:#039">Slide 1</li>
        <li class="swiper-slide" style="background:#030">Slide 2</li>
        <li class="swiper-slide" style="background:#960">Slide 3</li>
        <li class="swiper-slide" style="background:#039">Slide 4</li>
        <li class="swiper-slide" style="background:#030">Slide 5</li>
        <li class="swiper-slide" style="background:#960">Slide 6</li>
    </ul>
</div>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="swiper.min.js" type="text/javascript"></script>
<script type="text/javascript">        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',// 水平horizontal或垂直vertical,默认horizontal
    loop: false, // true无限循环切换,默认false
	effect : 'slide',// 默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
	slidesPerView: 3,//切换元素显示的数量，默认：1
    spaceBetween: 30 //切换元素之间的间距，默认0;
  })        
</script>
</body>
</html>
